<template>
  <div>
    <n-input-group>
      <template v-for="(item,index) in getPostion" :key="index">
        <n-form-item :class="needSign ? 'need-sign': ''" :show-label="false" :path="item.key">
          <n-input-number
            v-model:value="slotForm[item.key]"
            v-bind="item.props"
            :show-button="false"
            @blur="updateData"
            @update:value="updateData"
          />
        </n-form-item>
      </template>
      <n-button v-if="needSign" quaternary type="info" style="padding-right: 0;" @click="handleShow">
        去标记
        <n-icon size="20" color="rgba(42, 130, 228, 1)">
          <LocationSharp />
        </n-icon>
      </n-button>
    </n-input-group>
  </div>

  <n-modal
    v-model:show="showModal"
    :mask-closable="false"
    preset="dialog"
    title=""
    positive-text="确定"
    style="width: 1000px;height: 600px;"
    @positive-click="handleData"
    @negative-click="showModal = false"
  >
    <MapComp v-if="showModal" @map-emit="handleMap" />
  </n-modal>
</template>

<script>
import { reactive, toRefs, computed } from 'vue'
import MapComp from '@/components/MapComp/MapComp.vue'
import { LocationSharp } from '@vicons/ionicons5'
export default {
  name: 'SlotPosition',
  components: { MapComp, LocationSharp },
  props: {
    form: {
      type: Object,
      default: () => {}
    },
    prefix: {
      type: String,
      default: ''
    },
    options: {
      type: Object,
      default: () => {}
    },
    needSign: {
      type: Boolean,
      default: true
    }
  },
  emits: ['update:form'],
  setup(props, { emit }) {
    const data = reactive({
      slotForm: {},
      showModal: false,
      mapData: {}
    })

    props.options.forEach((item) => {
      data.slotForm[item.key] = Number(props.form[item.key]) || null
      emit('update:form', {
        ...props.form,
        ...data.slotForm
      })
    })

    const getPostion = computed(() => {
      return props.options
    })

    const handleShow = () => {
      data.showModal = true
      handleMap({ lng: null, lat: null })
    }

    const handleMap = ({ lng, lat }) => {
      data.mapData[`${props.prefix}Longitude`] = lng
      data.mapData[`${props.prefix}Latitude`] = lat
    }

    const handleData = () => {
      data.slotForm = {
        ...data.mapData
      }
      updateData()
    }

    const updateData = () => {
      emit('update:form', {
        ...props.form,
        ...data.slotForm
      })
    }

    return {
      ...toRefs(data),
      getPostion,
      updateData,
      handleShow,
      handleMap,
      handleData
    }
  }
}

</script>
<style scoped lang='scss'>
::v-deep(.n-input-group){
  width: 550px;
  .n-form-item{
    width: 50%;
  }
  .need-sign:last-of-type{
    width: calc(50% - 76px);
  }
  .n-input-number{
    width: 100%;
  }
  .n-form-item+.n-form-item{
    margin-left: 24px !important;
  }
}
</style>
